<template>
	<view class="address-page">
		<view class="item" v-for="(item, index) in list" :key="index">
			<view class="icon-box">{{ item.name.slice(0, 1) }}</view>
			<view class="content">
				<view class="user">
					<text class="name">{{ item.name }}</text>
					<text class="phone">{{ item.phone }}</text>
				</view>
				<view class="address-box">
					<text class="default" v-if="item.is_default == 1">默认</text>
					<text class="address">{{ addressTransform(item.modify_region.name) }}{{ item.addr }}</text>
				</view>
			</view>
			<view class="edit" @click="addressEdit(item)">编辑</view>
		</view>
		
		<u-loadmore :status="status" />
		
		<view class="bottom-box">
			<button class="btn" @click="addressAdd">新增地址</button>
		</view>
	</view>
</template>

<script>
	import { getAddressList } from '@/api/api'

	export default {
		data () {
			return {
				list: [],
				/* 分页 */
				status: 'loadmore',
				page: 0,
				last_page: 1,
			}
		},
		onShow () {
			this.loadData()
		},
		onReachBottom () {
			this.getListData()
		},
		methods: {
			loadData () {
				this.page = 0
				this.last_page = 1
				this.list = []
				this.getListData()
			},
			async getListData () {
				if(this.page >= this.last_page) return
			
				this.status = 'loading'
				this.page = ++this.page
			
				const req = await getAddressList({
					page: this.page,
					page_size: 10,
				})
				
				if (req) {
					this.list = this.list.concat(req.data.data)
					this.last_page = req.data.last_page
					
					if (this.page >= this.last_page) {
						this.status = 'nomore'
					} else {
						this.status = 'loading'
					}
					
					return ''
				}
			},
			
			addressEdit (item) {
				uni.navigateTo({
					url: '/pages/my/address/addressEdit',
					success: (res) => {
						res.eventChannel.emit('addressInfo', {
							id: item.id,
							name: item.name,
							phone: item.phone,
							address: item.modify_region.name.split('/').join(' '),
							region: item.region,
							addr: item.addr,
							is_default: item.is_default
						})
					}
				})
			},
			addressAdd () {
				uni.navigateTo({
					url: '/pages/my/address/addressAdd'
				})
			}
		},
		computed: {
			addressTransform () {
				return (name) => {
					if (name) {
						return name.split('/').join('')
					} else {
						return ''
					}
				}
			}
		}
	}
</script>

<style lang="scss">
.address-page {
	box-sizing: border-box;
	padding: 24rpx;
	padding-bottom: 156rpx;
	padding-bottom: calc(156rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(156rpx + env(safe-area-inset-bottom));
	min-height: 100%;
	background-color: $bg-color;
	.item {
		padding: 24rpx;
		border-radius: 14rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		&:not(:last-of-type) {
			margin-bottom: 20rpx;
		}
		.icon-box {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			color: #cd2a1b;
			font-size: 28rpx;
			font-weight: bold;
			text-align: center;
			line-height: 70rpx;
			background-color: #fae9e7;
		}
		.content {
			flex: 1;
			margin: 0 24rpx;
			.user {
				.name {
					font-size: 28rpx;
				}
				.phone {
					margin-left: 22rpx;
					color: #666666;
					font-size: 22rpx;
				}
			}
			.address-box {
				margin-top: 14rpx;
				line-height: 44rpx;
				.default {
					margin-right: 10rpx;
					padding: 0 4rpx;
					border-radius: 4rpx;
					color: #846956;
					font-size: 24rpx;
					background-color: #f8f0e7;
				}
				.address {
					color: #666666;
					font-size: 28rpx;
				}
			}
		}
		.edit {
			color: #e60b11;
			font-size: 26rpx;
			font-weight: bold;
		}
	}
	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		height: 112rpx;
		padding: 0 20rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		display: flex;
		align-items: center;
		.btn {
			flex: 1;
			margin: 0;
			border-radius: 72rpx;
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
			line-height: 72rpx;
			background-color: #5749f7;
		}
	}
}
</style>
